<!doctype html>
<html>

<head>
    <title>jQuery AJAX POST Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <h2>Send Data with jQuery AJAX</h2>
    <input type="text" id="title" placeholder="Enter title" />
    <input type="text" id="body" placeholder="Enter body" />
    <button id="sendBtn">Send</button>
    <div id="response"></div>

    <script>
        $(document).ready(function () {
            $("#sendBtn").click(function () {
                const postData = {
                    title: $("#title").val(),
                    body: $("#body").val(),
                    userId: 1,
                };

                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts",
                    type: "POST",
                    data: JSON.stringify(postData),
                    contentType: "application/json; charset=UTF-8",
                    success: function (response) {
                        $("#response").html(`
              <strong>Response ID:</strong> ${response.id}<br>
              <strong>Title:</strong> ${response.title}<br>
              <strong>Body:</strong> ${response.body}
            `);
                    },
                    error: function () {
                        $("#response").text("Error sending data!");
                    },
                });
            });
        });
    </script>
</body>

</html>
